<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../js/laydate.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<title>报销管理</title>
<style type="text/css">
a {
	text-decoration: none;
}

#reimbursementQueryModel {
	width: 500px;
	height: 260px;
	z-index: 1000;
	position: fixed;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -300px;
	background: #fff;
	border: 1px solid rgba(39, 38, 38, 0.31);
	border-radius: 10px;
	padding: 15px;
	box-shadow: 2px 2px 5px #333333;
}

#reimbursementDivModel, #reimbursementModifyModel {
	width: 500px;
	height: 300px;
	z-index: 1000;
	position: fixed;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -300px;
	background: #fff;
	border: 1px solid rgba(39, 38, 38, 0.31);
	border-radius: 10px;
	padding: 15px;
	box-shadow: 2px 2px 5px #333333;
}

.inputkuang {
	border: 1px solid #DBDBDB;
	outline: none;
	border-radius: 5px;
}

#reasoninput, #qreasoninput, #mreasoninput {
	resize: none;
	height: 65px;
	width: 435px;
	vertical-align: top;
	border: 1px solid #DBDBDB;
	outline: none;
	border-radius: 5px;
}

.xiala {
	border: 1px solid black;
	outline: none;
	border-radius: 2px;
}
</style>
</head>
<body>
	<div class="container" style="width: 100%; padding: 25px 15px;">
		<div class="row clearfix">
			<div class="col-md-12 column" style="padding: 20px;">
				<div style="float: left;">
					<input type="button" class="btn btn-primary btn"
						onclick="changeState()" value="我要报销" />
				</div>
				<input type="hidden" id="a_type" name="a_type" value="3" />


				<!-- 报销申请窗口 -->
				<div id="reimbursementDivModel" style="display: none;">
					<form th:action="@{/reimbursement/createReimbursement}"
						onsubmit="return applyCheck()" method="post"
						id="addreimbursement">
						<span style="margin-bottom: 5px;"></span>
						<table class='table table-hover'>
							<tr>
								<td colspan="2">指定审批人： <select name="a_eid" id="a_eid"
									class="xiala">
										<option value="">请选择</option>
								</select>
								</td>
								<!-- <td>请假类型: <select name="ht_id" id="ht_id" class="xiala">
										<option value="">请选择</option>
								</select>
								</td> -->
							</tr>
							<tr>
								<td colspan="2"><span style="padding-left: 0px">报销项目名称:&nbsp;&nbsp;&nbsp;&nbsp;<br /></span><input
									class="inputkuang" type="text" id="rb_name" name="rb_name"
									value="" autocomplete="off" /></td>
								<!-- <td>结束时间:<input readonly="readonly" type="text"
									id="endtime" name="endtime" value="" autocomplete="off" />
								</td> -->

							</tr>
							<tr>
								<td colspan="1">报销项目单价:<br /> <input type="text"
									class="inputkuang" id="rb_price" name="rb_price" value=""
									autocomplete="off" />
								</td>
								<td colspan="1">计价单价:<br /> <select name="rb_company"
									id="rb_company" class="xiala">
										<option value="元">元</option>

								</select>
								</td>

							</tr>
							<tr>
								<td><input type="submit" value="提交"
									class="btn btn-primary btn" style="margin-left: 80px;"
									/></td>
								<td><input type="text" value="关闭"
									style="width: 54px; margin-left: 80px;"
									class="btn btn-primary btn" onclick="changeState()" /></td>
							</tr>
						</table>
					</form>
				</div>






				<!-- 报销修改窗口 -->
				<div id="reimbursementModifyModel" style="display: none;">
					<form th:action="@{/reimbursement/modifyReimbursement}"
						onsubmit="return validate_modify(this);" method="post"
						id="modifyreimbursement">
						<span style="margin-bottom: 5px;"></span> <input type="hidden"
							name=mrb_id id="mrb_id" value="" />
						<table class='table table-hover'>

							<tr>
								<td colspan="2">指定审批人： <select name="ma_eid" id="ma_eid"
									class="xiala">
										<option value="">请选择</option>
								</select>
								</td>
								<!-- <td>请假类型: <select name="ht_id" id="ht_id" class="xiala">
										<option value="">请选择</option>
								</select>
								</td> -->
							</tr>

							<tr>
								<td colspan="2"><span style="padding-left: 0px">报销项目名称:&nbsp;&nbsp;&nbsp;&nbsp;<br /></span><input
									class="inputkuang" type="text" id="mrb_name" name="mrb_name"
									value="" autocomplete="off" /></td>
								<!-- <td>结束时间:<input readonly="readonly" type="text"
									id="endtime" name="endtime" value="" autocomplete="off" />
								</td> -->

							</tr>

							<tr>
								<td colspan="1">报销项目单价:<br /> <input type="text"
									class="inputkuang" id="mrb_price" name="mrb_price" value=""
									autocomplete="off" />
								</td>
								<td colspan="1">计价单价:<br /> <select name="mrb_company"
									id="mrb_company" class="xiala">
										<option value="元">元</option>

								</select>
								</td>

							</tr>

							<tr>
								<td colspan="1"><input type="button" value="修改"
									onclick="modifyReimbursement()" class=" btn btn-primary btn"
									style="margin-left: 80px;" /></td>
								<td><input type="text" value="关闭"
									style="width: 54px; margin-left: 80px;"
									class="btn btn-primary btn" onclick="changeMState()" /></td>
							</tr>
						</table>
					</form>
				</div>


				<button type="button" class="btn btn-primary btn"
					onclick="openQueryView()" style="float: right;">查询</button>




				<!-- 报销查询窗口 -->
				<div id="reimbursementQueryModel" style="display: none;">
					<table class='table table-hover'>
						<tr>
							<!-- <td>按名字： <input type="text" name="empName" id="empName"
								value="" />
							</td> -->
							<!-- <td colspan="1">按请假类型: <br /> <select name="qht_id"
								id="qht_id" class="xiala">
									<option value="">请选择</option>
							</select>
							</td> -->
							<td colspan="2">按审批状态: <br /> <select name="aps_id"
								id="aps_id" class="xiala">
									<option value="">请选择</option>
									<option value="1">未审批</option>
									<option value="2">已通过</option>
									<option value="3">未通过</option>
							</select></td>
						</tr>
						<tr>
							<td colspan="2">按项目名称:<br /> <input type="text"
								name="qrb_name" id="qrb_name" style="width: 130px;" />
							</td>

						</tr>
						<tr>
							<td colspan="1">按报销项目单价大于<br /> <input type="text"
								class="inputkuang" id="qrb_price" name="qrb_price" value=""
								autocomplete="off" />
							</td>
							<td colspan="1">计价单价:<br /> <select name="qrb_company"
								id="qrb_company" class="xiala">
									<option value="元">元</option>

							</select>
							</td>



						</tr>
						<tr>
							<td><input type="button" value="查询"
								onclick="queryApply('1')" class="btn btn-primary btn"
								style="margin-left: 80px;" /></td>
							<td><input type="text" value="关闭"
								style="width: 54px; margin-left: 80px;"
								class="btn btn-primary btn" onclick="openQueryView()" /></td>
						</tr>
					</table>
				</div>


				<!-- 报销信息展示框 -->
				<div id="reimbursements"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		//展示审批人方法
		showApprovalPersons();
		//读取方法
		showReimbursements(1);
	})
	//查询时额外的检查
	function queryApply(pageIndex){
		
		var str=$("#qrb_price").val();
	
		if(str.length>0){
			if(checkMoney(str)==false){
				alert("请输入正确的金额")
				return false
			}
		} 
		showReimbursements(pageIndex)
	}
	
	
	//提交报销申请时的检查
	function applyCheck(){
		if(confirm('确定提交?')==false){
			return false;
		}
		var obj=document.getElementById("addreimbursement");
		if(validate_reimbursement(obj)==false){
			return false;
		}
		
		var str=$("#rb_price").val();
		if(checkMoney(str)==false){
			alert("请输入正确的金额");
			return false;
		}
		
	}
	
	
	function checkMoney(str){
		 var isNum = /^\d+(\.\d+)?$/;
	        if(!isNum.test(str)){
	            return false;
	        }else{
	            return true;
	        }
	        return false;
	}

	//打开修改窗口
	//需要赋值审批人、项目名、价格、单位
	function openModifyView(a_eid, rb_name, rb_id,rb_company,rb_price ) {
		if (mbc.style.display == 'none') {
			changeMState();
		}

		//给框框赋值
		$("#ma_eid").val(a_eid);
		$("#mrb_name").val(rb_name);
		$("#mrb_company").val(rb_company);
		$("#mrb_price").val(rb_price);
		$("#mrb_id").val(rb_id);

	}

	//修改方法
	function modifyReimbursement() {
		if (confirm('确定修改?') == false) {
			return false;
		}
		/* 非空检查 */
		var form11 = document.getElementById("reimbursementModifyModel")
		if ((validate_modify(form11)) == false) {
			return false;
		}
		//金额检查
		var str=$("#mrb_price").val();
		if(checkMoney(str)==false){
			alert("请输入正确的金额")
			return false
		}
		$.ajax({
			url : "/reimbursement/modifyReimbursement",
			type : "POST",
			data : {
				a_eid : $("#ma_eid").val(),
				rb_id : $("#mrb_id").val(),
				rb_name : $("#mrb_name").val(),
				rb_company : $("#mrb_company").val(),
				rb_price : $("#mrb_price").val()
			},
			dataType : "json",
			success : function(data) {
				alert(data);
				window.location.reload();
			},
			error : function(data) {
				alert("修改假的失败");
			}
		});
	}

	//修改格式检查
	function validate_modify(thisform) {
		with (thisform) {
			if (validate_required(ma_eid, "审批人不能为空!") == false) {
				ma_eid.focus();
				return false
			}
			if (validate_required(mrb_name, "项目名称不能为空!") == false) {
				mrb_name.focus();
				return false
			}
			if (validate_required(mrb_price, "单价不能为空!") == false) {
				mrb_price.focus();
				return false
			}
			if (validate_required(mrb_company, "计价单位不能为空!") == false) {
				mrb_company.focus();
				return false
			}
		}
	}

	//打开关闭修改窗口
	var mbc = document.getElementById("reimbursementModifyModel");
	function changeMState() {
		if(bc.style.display == 'block'){
			changeState();
		}
		if(queryHol.style.display == 'block'){
			openQueryView();
		}
		if (mbc.style.display == 'none') {
			mbc.style.display = 'block';
		} else {
			mbc.style.display = 'none';
		}
	}

	//删除方法：
	function deleteReimbursement(a_id) {
		if (confirm('确定删除?') == false) {
			return false;
		}
		$.ajax({
			url : "/reimbursement/deleteReimbursement",
			type : "POST",
			data : {
				a_id : a_id
			},
			dataType : "json",
			success : function(data) {
				alert(data);
				window.location.reload();
			},
			error : function(data) {
				alert("删除失败");
			}
		});
	}

	//打开查询窗口
	var queryHol = document.getElementById("reimbursementQueryModel");
	function openQueryView() {
		if(bc.style.display == 'block'){
			changeState();
		}
		if(mbc.style.display == 'block'){
			changeMState();
		}
		if (queryHol.style.display == 'none') {
			queryHol.style.display = 'block';
		} else {
			queryHol.style.display = 'none';
		}
	}

	//展示历史报销记录
	//展示方法，同样也是查询方法 
	function showReimbursements(pageIndex) {
		//先看看查询框是否开启，开启则关闭
		if (queryHol.style.display == 'block') {
			queryHol.style.display = 'none';
		}
		
		$
				.ajax({
					url : "/getApprovalInfo",
					type : "POST",
					data : {
						pageIndex : pageIndex,
						a_type : $("#a_type").val(),
						a_eid : $("#qa_eid").val(),
						a_state : $("#aps_id").val(),
						rb_name : $("#qrb_name").val(),
						rb_price : $("#qrb_price").val(),
						rb_company : $("#qrb_company").val(),
					},
					dataType : "json",
					success : function(data) {
						var obj = data.beanList;
						var content = '';
						content += '<table class="table table-bordered" style="margin-top: 20px;">'
								+ '<thead>'
								+ '<tr>'
								+ '<th style="width: 150px;">姓名</th>'
								+ '<th>报销项目名称</th>'
								+ '<th>计价单位</th>'
								+ '<th>报销项目单价</th>'
								+ '<th>审批状态</th>'
								+ '<th style="width: 150px;">操作</th>'
								+ '</tr>'
								+ '</thead>' + '<tbody>';
						for (var i = 0; i < obj.length; i++) {
							/* alert(obj[i].reimbursement.rb_name); */
							content += '<tr class="success">' + '<td>'
									+ obj[i].emp.name + '</td>' + '<td>'
									+ obj[i].reimbursement.rb_name + '</td>'
									+ '<td>' + obj[i].reimbursement.rb_company
									+ '</td>' + '<td>'
									+ obj[i].reimbursement.rb_price + '</td>'
									+ '<td>' + obj[i].stateName + '</td>'
									+ '<td>'
							if (obj[i].stateName == "未审批") {
								content += '<a href="javascript:openModifyView('
										+ obj[i].a_eid
										+ ',\''
										+ obj[i].reimbursement.rb_name
										+ '\','
										+ obj[i].reimbursement.rb_id
										+ ',\''
										+ obj[i].reimbursement.rb_company
										+ '\','
										+ obj[i].reimbursement.rb_price
										+ ')" class="btn btn-primary btn">修改</a>';
							}

							content += '<a href="javascript:deleteReimbursement('
									+ obj[i].a_id
									+ ')" class="btn btn-primary btn">删除</a>'
									+ '</td>' + '</tr>';
						}

						content += '</tbody></table>';
						/* alert(content); */
						if (data.pageIndex > 6) {
							content += '<a href="javascript:showReimbursements(1)">首页</a>&nbsp;&nbsp;'
						}
						if (data.pageIndex > 1) {
							content += '<a href="javascript:showReimbursements('
									+ (data.pageIndex - 1) + ')">上一页 </a>&nbsp;&nbsp;';
						}
						for (var i = data.pageBegin; i <= data.pageEnd; i++) {
							if (data.pageIndex == i) {
								content += '[' + i + ']&nbsp;&nbsp;';
							} else if (data.pageIndex != i) {
								content += '<a href="javascript:showReimbursements('
										+ i + ')">[' + i + ']</a>&nbsp;&nbsp;';
							}
						}
						if (data.pageIndex < data.totalPage) {
							content += '<a href="javascript:showReimbursements('
									+ (data.pageIndex + 1) + ')">下一页 </a>&nbsp;&nbsp;';
						}
						if (data.pageIndex < (data.totalPage - 4)) {
							content += '<a href="javascript:showReimbursements('
									+ data.totalPage + ')">末页 </a><br />';
						}
						content += '<br /> 第' + data.pageIndex + '页，共'
								+ data.totalPage + '页';

						$("#reimbursements").html(content);
					},
					error : function(data) {
						alert("失败");
					}
				});
	}

	//展示审批人
	function showApprovalPersons() {
		/* if (personIsOk) { */
		$.ajax({
			url : "/findApprovalPersons",
			success : function(data) {

				var obj = $("#a_eid");
				var obj1 = $("#ma_eid");
				/* obj.empty(); */
				for (var i = 0; i < data.length; i++) {
					obj.append("<option value='"+data[i].id+"'>" + data[i].name
							+ "</option>");
					obj1.append("<option value='"+data[i].id+"'>"
							+ data[i].name + "</option>");
				}
				personIsOk = false;
			},
			error : function(data) {
				alert(error);
			}
		});
		/* } */

	}

	//打开、关闭报销框
	var bc = document.getElementById("reimbursementDivModel");
	function changeState() {
		//先检查 查询 和 修改 是不是打开的，是的话关闭
		if(queryHol.style.display == 'block'){
			openQueryView();
		}
		if(mbc.style.display == 'block'){
			changeMState();
		}
		
		if (bc.style.display == 'none') {
			bc.style.display = 'block';
		} else {
			bc.style.display = 'none';
		}
	}

	//非空检查
	function validate_reimbursement(thisform) {
		with (thisform) {
			if (validate_required(a_eid, "审批人不能为空!") == false) {
				a_eid.focus();
				return false
			}
			if (validate_required(rb_name, "项目名称不能为空!") == false) {
				rb_name.focus();
				return false
			}
			if (validate_required(rb_price, "单价不能为空!") == false) {
				rb_price.focus();
				return false
			}
			if (validate_required(rb_company, "计价单位不能为空!") == false) {
				rb_company.focus();
				return false
			}
		}
	}

	//非空检查方法
	function validate_required(field, alerttxt) {
		with (field) {
			if (value == null || value == "") {
				alert(alerttxt);
				return false
			} else {
				return true
			}
		}
	}
</script>
</html>